<template>
  <view class="chart-box">
    <!-- 标题 -->
    <view class="title">{{ title }}</view>

    <!-- y 轴 -->
    <view class="y-axis">脂肪量</view>
    <!-- x 轴 -->
    <view class="x-axis">肌肉率</view>

    <!-- 九宫格区域 -->
    <view class="grid">
      <view 
        v-for="(item,index) in gridList" 
        :key="index" 
        class="grid-item" 
        :class="{active: index === activeIndex}"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "BodyTypeChart",
  props: {
    title: { // 上方标题
      type: String,
      default: "偏胖型"
    },
    activeIndex: { // 高亮格子的索引 (0~8)
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      gridList: [
        "隐性肥胖", "偏胖型", "隐性肥胖",
        "缺乏肌肉型", "标准型", "标准肌肉型",
        "偏瘦型", "偏瘦肌肉型", "健美肌肉型"
      ]
    }
  }
}
</script>

<style scoped>
.chart-box {
  position: relative;
  
  width: 600rpx;
  padding: 30rpx;
  margin: 20rpx;
  border-left: 4px solid transparent;
  
   border-image: linear-gradient(red, green, #0099ff) 1;
  text-align: center;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.y-axis {
  position: absolute;
  top: 200rpx;
  left: -36rpx;
  writing-mode: vertical-rl;
  font-size: 24rpx;
  color: #666;
}
.x-axis {
  position: absolute;
  right: 300rpx;
  bottom: -36rpx;
  font-size: 24rpx;
  color: #666;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);

  width: 100%;
  height: 100%;
}
.grid-item {
  height: 100rpx;
  line-height: 100rpx;
  margin: 4rpx;
  font-size: 26rpx;
   background-color: #efefef;
}
.grid-item.active {
  background-color: #0090BD;
  color:#fff;
  border-radius: 10rpx;
}
</style>
